import React, { Component } from 'react';
import {
  Col,
  Radio,
  Table,
  Space,
  Row,
  Form,
  Modal,
  Button,
  Tabs,
  message,
  Descriptions,
  Input,
  Select,
  Tag,
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
import 'moment/locale/zh-cn';
import { getDictionaryLabel } from '../../../rudexRou/OperatesCookie.js';
import { getUrl } from '../../../utils';
import NewModal from '../../../componentJsx/common/NewModal';
import {
  getExamProgress,
  getMarkingProgress,
  examQueryPage,
  markQueryPage,
  publishStatus,
} from '../../../api/exam';
import {
  getEmpNoOrEmpName,
  bindExaminersAgain,
  getExaminers,
} from '../../../api3';
import AdvancedSearchForm from '../../../componentJsx/common/searchForm';
import HasPermi from '../../../componentJsx/common/hasPermi';
import '../../../componentCss/component.css';
const { Option } = Select;
export default class EditExam extends Component {
  constructor (props) {
    super(props);
    this.state = {
      bottonListLeft: [
        {
          interceptor: 'tmfsExamPlatform:publishScore:publish',
          clickFn: () => this.showModal(),
          text: '发布',
        },
      ],
      searchForm: [
        {
          type: 'input',
          name: '工号/姓名',
          code: 'empNoOrName',
          placeholder: '工号/姓名',
          maxLength: 50,
        },

        {
          type: 'select',
          name: '考试状态',
          code: 'examStatus',
          options: getDictionaryLabel('examStatus'),
        },
        {
          type: 'select',
          name: '阅卷状态',
          code: 'markingStatus',
          options: getDictionaryLabel('markingStatus'),
        },
      ],
      tableColumns: [
        {
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          width: 120,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 120,
          ellipsis: true,
          fixed: 'left',
        },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '考试状态',
          dataIndex: 'examStatus',
          key: 'examStatus',
          ellipsis: true,
          width: 80,
          render: (t, r) => {
            switch (t) {
              case 0:
                return <Tag color='#f50'>未考</Tag>;
              case 1:
                return <Tag color='#2db7f5'>考试中</Tag>;
              case 2:
                return <Tag color='#87d068'>已完成</Tag>;
              case 3:
                return <Tag color='#cd201f'>缺考</Tag>;
              default:
                break;
            }
          },
        },
        {
          title: '阅卷状态',
          dataIndex: 'markingStatus',
          key: 'markingStatus',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('markingStatus', text) : text,
        },
        {
          title: '参考时间',
          dataIndex: 'startTime',
          key: 'startTime',
          ellipsis: true,
          width: 150,
        },
        {
          title: '考试成绩',
          dataIndex: 'score',
          key: 'score',
          ellipsis: true,
          width: 80,
        },
        {
          title: '是否通过',
          dataIndex: 'pass',
          key: 'pass',
          ellipsis: true,
          width: 80,
          render: (text) => (text ? (text === '0' ? '不通过' : '通过') : ''),
        },
        {
          title: '阅卷人',
          dataIndex: 'examinerName',
          key: 'examinerName',
          ellipsis: true,
          width: 80,
          render: (text, record) =>
            record.markingStatus == '1' && !text ? '系统' : text,
        },
        {
          title: '阅卷时间',
          dataIndex: 'markingTime',
          key: 'markingTime',
          ellipsis: true,
          width: 150,
        },
      ],
      markingColumns: [
        {
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          width: 120,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 120,
          ellipsis: true,
          fixed: 'left',
        },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '考试状态',
          dataIndex: 'examStatus',
          key: 'examStatus',
          ellipsis: true,
          width: 80,
          render: (t, r) => {
            switch (t) {
              case 0:
                return <Tag color='#f50'>未考</Tag>;
              case 1:
                return <Tag color='#2db7f5'>考试中</Tag>;
              case 2:
                return <Tag color='#87d068'>已完成</Tag>;
              case 3:
                return <Tag color='#cd201f'>缺考</Tag>;
              default:
                break;
            }
          },
        },
        {
          title: '阅卷状态',
          dataIndex: 'markingStatus',
          key: 'markingStatus',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('markingStatus', text) : text,
        },
        {
          title: '参考时间',
          dataIndex: 'startTime',
          key: 'startTime',
          ellipsis: true,
          width: 150,
        },
        {
          title: '考试成绩',
          dataIndex: 'score',
          key: 'score',
          ellipsis: true,
          width: 80,
        },
        {
          title: '是否通过',
          dataIndex: 'pass',
          key: 'pass',
          ellipsis: true,
          width: 80,
          render: (text) => (text ? (text === '0' ? '不通过' : '通过') : ''),
        },
        {
          title: '发布状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('testExamStatus', text) : text,
        },
        {
          title: '阅卷人',
          dataIndex: 'examinerName',
          key: 'examinerName',
          ellipsis: true,
          width: 80,
          render: (text, record) =>
            record.markingStatus ==1 && !text ? '系统' : text,
        },
        {
          title: '阅卷时间',
          dataIndex: 'markingTime',
          key: 'markingTime',
          ellipsis: true,
          width: 150,
        },
        {
          title: '操作',
          dataIndex: 'handle',
          ellipsis: true,
          width:
            sessionStorage.getItem('roleCode').indexOf('tmfs-exam') > -1
              ? 150
              : 0,
          fixed: 'right',
          align: 'center',
          render: (_, record) => (
            <>
              <HasPermi
                bottonData={{
                  type: 'link',
                  size: 'small',
                  interceptor: 'tmfsExamPlatform:publishScore:publish',
                  clickFn: () => this.publishScore(record),
                  disabled: record.status === '1',
                  text: '发布成绩',
                }}
              />
            </>
          ),
        },
      ],
      noMarkingColumns: [
        {
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          width: 120,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 120,
          ellipsis: true,
          fixed: 'left',
        },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '考试状态',
          dataIndex: 'examStatus',
          key: 'examStatus',
          ellipsis: true,
          width: 80,
          render: (t, r) => {
            switch (t) {
              case 0:
                return <Tag color='#f50'>未考</Tag>;
              case 1:
                return <Tag color='#2db7f5'>考试中</Tag>;
              case 2:
                return <Tag color='#87d068'>已完成</Tag>;
              case 3:
                return <Tag color='#cd201f'>缺考</Tag>;
              default:
                break;
            }
          },
        },
        {
          title: '阅卷状态',
          dataIndex: 'markingStatus',
          key: 'markingStatus',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('markingStatus', text) : text,
        },
        {
          title: '参考时间',
          dataIndex: 'startTime',
          key: 'startTime',
          ellipsis: true,
          width: 150,
        },
        {
          title: '阅卷人',
          dataIndex: 'examinerName',
          key: 'examinerName',
          ellipsis: true,
          width: 80,
          render: (text, record) =>
            record.markingStatus ==1 && !text ? '系统' : text,
        },
        {
          title: '操作',
          dataIndex: 'handle',
          ellipsis: true,
          width:
            sessionStorage.getItem('roleCode').indexOf('tmfs-exam') > -1
              ? 150
              : 0,
          fixed: 'right',
          align: 'center',
          render: (_, record) => (
            <>
              <HasPermi
                bottonData={{
                  type: 'link',
                  size: 'small',
                  interceptor: 'tmfsExamPlatform:publishScore:publish',
                  disabled: record.markingStatus === '1',
                  clickFn: () => this.showUpdateExaminer(record),
                  text: '修改阅卷人',
                }}
              />
            </>
          ),
        },
      ],
      table2Columns: [
        {
          title: '阅卷人员',
          dataIndex: 'markingEmpName',
          key: 'markingEmpName',
          width: 120,
          ellipsis: true,
        },
        {
          title: '阅卷人数',
          dataIndex: 'applicantNum',
          key: 'applicantNum',
          width: 120,
          ellipsis: true,
        },
        {
          title: '未阅人数',
          dataIndex: 'notMarkingNum',
          key: 'notMarkingNum',
          ellipsis: true,
          width: 270,
          render: (text, record) => (
            <Space size='middle'>
              <a onClick={() => this.showDetail(record, 'noMarking')}>
                {text ? text : 0}
              </a>
            </Space>
          ),
        },
        {
          title: '已阅人数',
          dataIndex: 'markingNum',
          key: 'markingNum',
          ellipsis: true,
          width: 270,
          render: (text, record) => (
            <Space size='middle'>
              <a onClick={() => this.showDetail(record, 'marking')}>
                {text ? text : 0}
              </a>
            </Space>
          ),
        },
      ],
      searchEmpColumns: [
        {
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          width: 80,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 100,
          ellipsis: true,
          fixed: 'left',
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 200,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 200,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 200,
        },
      ],
      selectedRowKeys: [],
      selectedRows: [],
      selectedMarkRowKeys: [],
      selectedMarkRows: [],
      searchSelectedRowKeys: [],
      searchSelectedRows: [],
      columnNum: 6,
      total: 0,
      pageSize: 10,
      page: 1,
      total1: 0,
      pageSize1: 10,
      page1: 1,
      total2: 0,
      pageSize2: 10,
      page2: 1,
      //数据
      tableData: [], //最新数据
      noMarkingData: [],
      markingData: [],
      table2Data: [],
      examinerOptions: [],
      isEditVisible: false,
      isPublishVisible: false,
      isUpdataExaminer: false,
      searchEmpModalVisible: false,
      searchTotal: 0,
      searchCurrentPage: 1,
      modelTitle: '已阅人员',
      confirmLoading: false, //确认按钮异步等待
      tableLoading: false,
      searchData: {},
      examData: null,
      examStatistical: {
        applicantNum: 0,
        examinationNum: 0,
        notExamNum: 0,
      },
      testexamId: '',
      selectModel: 1,
      currType: '',
      currentExaminer: {},
      currentMarking: {},
      checkedReader: '',
      readerList: [],
      addReaderList: [],
      empInfoList: [],
      bindStatus: null,
    };
  }

  componentWillMount () {
    let examData = JSON.parse(sessionStorage.getItem('examData'));
    if (this.state.selectModel === 1) {
      this.setState({ examData: examData, testexamId: examData.id }, () => {
        this.initExamPage();
        this.getExamProgress();
      });
    } else {
      this.setState({ examData: examData, testexamId: examData.id }, () => {
        this.getMarkingProgress();
        this.getExaminers();
      });
    }
  }
  componentDidMount () { }
  componentWillUnmount () { }
  // 发布成绩确认框
  showModal () {
    if (this.state.selectedMarkRowKeys.length === 0) {
      message.warning('请选择需要发布的记录');
      return false
    }
    this.setState({ isPublishVisible: true });
  }
  // 发布成绩确认框
  publishScore = (item) => {
    this.setState({
      selectedMarkRowKeys: [item.id],
      selectedMarkRows: [item],
      isPublishVisible: true,
    });
  };
  // 修改阅卷人
  showUpdateExaminer = (item) => {
    this.setState({
      isUpdataExaminer: true,
      currentExaminer: item,
      checkedReader: '',
    });
  };
  updateExaminer = () => {
    if (!this.state.checkedReader) return message.error('请选择阅卷人');
    let data = [];
    let empList = [];
    if (this.state.currentExaminer.length) {
      this.state.currentExaminer.forEach((item) => {
        empList.push(item.id);
      });
    } else {
      empList = [this.state.currentExaminer.id];
    }
    data.empList = empList;
    data.examinerEmpNo = this.state.checkedReader;
    bindExaminersAgain(data)
      .then((res) => {
        if (res.data.code === 200) {
          message.success('修改成功');
        } else {
          message.error(res.data.message || '修改失败');
        }
        this.setState({
          isUpdataExaminer: false,
          currentExaminer: {},
          selectedMarkRows: [],
          selectedMarkRowKeys: [],
        });
        this.getMarkingProgress();
        this.initMarkingPage(this.state.currentMarking, 'noMarking');
      })
      .catch(() => message.error('修改失败'));
  };
  // 发布成绩
  publishScores = () => {
    publishStatus({
      ids: this.state.selectedMarkRowKeys.join(','),
      publishStatus: '1',
    }).then((res) => {
      if (res.data.code === 200) {
        message.success('发布成功!');
        this.initMarkingPage(this.state.currentMarking, 'marking');
      } else {
        // console.log(res)
        message.error(res.data.message || '操作失败!');
      }
      this.setState({
        isPublishVisible: false,
        selectedMarkRowKeys: [],
        selectedMarkRows: [],
      });
    }).catch(err => {
      message.error(err || '发布成功!');
    });
  };
  // 显示阅卷详情
  showDetail = (item, type) => {
    this.setState({ currentMarking: item, currType: type }, () => {
      this.initMarkingPage();
    });
  };
  // 切换tabs
  changeTabs = (key) => {
    // console.log('key:', key);
    if (key === '1') {
      this.setState(
        { examData: this.state.examData, testexamId: this.state.testexamId },
        () => {
          this.initExamPage();
          this.getExamProgress();
        }
      );
    } else {
      this.setState(
        { examData: this.state.examData, testexamId: this.state.testexamId },
        () => {
          this.getExaminers();
          this.getMarkingProgress();
        }
      );
    }
  };
  // 考试进度统计
  getExamProgress () {
    getExamProgress({ id: this.state.testexamId }).then((data) => {
      this.setState({ examStatistical: data.data.data });
    });
  }
  //筛选搜索
  execSearch = (data) => {
    // console.log(data);
    this.setState({ searchData: data, page: 1 }, () => {
      this.initExamPage();
    });
  };
  // 阅卷进度统计
  getMarkingProgress () {
    getMarkingProgress({ id: this.state.testexamId }).then((data) => {
      this.setState({
        table2Data: data.data.data,
        total2: data.data.data.total,
      });
    });
  }
  getExaminers () {
    getExaminers({ examId: this.state.testexamId }).then((res) => {
      if (res.data.code === 200) {
        this.setState({ examinerOptions: res.data.data });
      } else {
        message.error(res.data.message || '阅卷人查询失败');
      }
    });
  }
  // 查询待阅人员数据
  initMarkingPage () {
    let item = this.state.currentMarking;
    let type = this.state.currType;
    const params = {
      currentPage: this.state.page,
      pageSize: this.state.pageSize,
      testexamId: this.state.testexamId,
      markingEmpNo: item.markingEmpNo,
      markingStatus: type === 'marking' ? '1' : '0',
    };
    markQueryPage(params).then((res) => {
      const dataList = [];
      if (res.data.code === 200) {
        const list = res.data.data.list;
        list.forEach((item) => {
          if (
            item &&
            item.examProcessDetailList &&
            item.examProcessDetailList.length > 1
          ) {
            const children = item.examProcessDetailList.slice(
              1,
              item.examProcessDetailList.length
            );
            children.forEach((child) => {
              child = Object.assign(child, {
                orgBdName: item.orgBdName,
                orgBgName: item.orgBgName,
                orgBuName: item.orgBuName,
                orgCuName: item.orgCuName,
                regionName: item.regionName,
                empName: item.empName,
                empNo: item.empNo,
              });
            });
            item = Object.assign(item, item.examProcessDetailList[0]);
            item.children = children;
          } else {
            Object.assign(item, item.examProcessDetailList[0]);
          }
          dataList.push(item);
        });
        const modelTitle = type === 'marking' ? '已阅人员' : '未阅人员';
        this.setState({
          markingData: dataList,
          isEditVisible: true,
          currType: type,
          modelTitle: modelTitle,
          total: res.data.data.total,
        });
      }
    });
  }
  // 查询参考人员数据
  initExamPage () {
    const params = Object.assign(
      {
        currentPage: this.state.page1,
        pageSize: this.state.pageSize1,
        testexamId: this.state.testexamId,
      },
      this.state.searchData
    );
    examQueryPage(params).then((res) => {
      const dataList = [];
      if (res.data.code === 200) {
        const list = res.data.data.list;
        list.forEach((item) => {
          if (
            item &&
            item.examProcessDetailList &&
            item.examProcessDetailList.length > 1
          ) {
            const children = item.examProcessDetailList.slice(
              1,
              item.examProcessDetailList.length
            );
            children.forEach((child) => {
              child = Object.assign(child, item);
            });
            item = Object.assign(item, item.examProcessDetailList[0]);
            item.children = children;
          } else {
            Object.assign(item, item.examProcessDetailList[0]);
          }
          dataList.push(item);
        });
        this.setState({ tableData: dataList, total1: res.data.data.total });
      }
    });
  }
  // 关闭model
  handleCancel = () => {
    this.setState({ isPublishVisible: false, isUpdataExaminer: false });
  };
  //选择行
  onMarkSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedMarkRowKeys: selectedRowKeys,
      selectedMarkRows: selectedRows,
    });
  };
  //选择行
  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, selectedRows });
  };
  handleChange = (value) => {
    this.setState({ checkedReader: value });
  };
  showSearchModal = () => {
    this.setState({ searchEmpModalVisible: true });
  };
  onSearchSelectChange = (searchSelectedRowKeys, searchSelectedRows) => {
    this.setState({
      searchSelectedRowKeys,
      searchSelectedRows,
    });
  };
  hiddenModal = () => {
    this.setState({
      modalVisible: false,
      searchEmpModalVisible: false,
      empNo: -1,
      searchSelectedRowKeys: [],
      searchSelectedRows: [],
      searchTotal: 0,
      searchCurrentPage: 1,
      empInfoList: [],
      bindStatus: null,
    });
  };
  searchEmpInfo = (value) => {
    if (value) {
      this.setState({
        searchLoading: true,
        searchSelectedRowKeys: [],
        searchSelectedRows: [],
      });
      const param = {
        empNoOrEmpName: value,
        pageSize: 10,
        currentPage: this.state.searchCurrentPage,
      };
      getEmpNoOrEmpName(param)
        .then((res) => {
          if (res.data.code === 200) {
            if (res.data.data.list.length > 0) {
              this.setState({
                searchLoading: false,
                empInfoList: res.data.data.list,
                searchTotal: res.data.data.total,
              });
            } else {
              this.setState({
                searchLoading: false,
                empInfoList: [],
              });
              message.warning('没有查询到相关人员信息');
            }
          } else {
            this.setState({
              searchLoading: false,
            });
            message.error('查询失败');
          }
        })
        .catch((err) => {
          this.setState({
            searchLoading: false,
          });
          message.error('查询失败');
        });
    } else {
      message.warning('请输入员工工号或姓名');
    }
  };
  checkEmpToReader = () => {
    if (this.state.searchSelectedRowKeys.length == 0) {
      return message.warning('请搜索并选择需要添加的阅卷人');
    }
    let addReaderList = { ...this.state.searchSelectedRows[0] };
    //判断是否重复阅卷人
    for (let i = 0; i < this.state.examinerOptions.length; i++) {
      if (addReaderList.empNo == this.state.examinerOptions[i].empNo) {
        return message.warning('请勿重复添加');
      }
    }
    this.setState(
      {
        examinerOptions: [
          ...this.state.examinerOptions,
          {
            empNo: addReaderList.empNo,
            empName: addReaderList.empName,
          },
        ],
      },
      () => {
        this.hiddenModal();
      }
    );
  };
  //修改页数changePage
  changePage = (page, pageSize) => {
    this.setState({ page, pageSize }, () => {
      this.initMarkingPage();
    });
  };
  changePage1 = (page1, pageSize1) => {
    this.setState({ page1, pageSize1 }, () => {
      this.initExamPage();
    });
  };
  changePage2 = (page2, pageSize2) => {
    this.setState({ page2, pageSize2 }, () => {
      this.getMarkingProgress();
    });
  };
  readerForm = React.createRef();
  render () {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const rowSelection1 = {
      selectedRowKeys: this.state.selectedMarkRowKeys,
      onChange: this.onMarkSelectChange,
    };
    const searchRowSelection = {
      selectedRowKeys: this.state.searchSelectedRowKeys,
      onChange: this.onSearchSelectChange,
    };
    //限制为只能输入整数
    const limitNumber = (value) => {
      if (typeof value === 'string') {
        return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : '';
      } else if (typeof value === 'number') {
        return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : '';
      } else {
        return '';
      }
    };
    return (
      <div className='examWrap'>
        <div className='basicInfo'>
          <Descriptions
            title='基本信息'
            column={this.state.columnNum}
            size='small'
          >
            <Descriptions.Item label='考试名称'>
              {this.state.examData.name}
            </Descriptions.Item>
            <Descriptions.Item label='考试级别'>
              {getDictionaryLabel('examLevel', this.state.examData.level)}
            </Descriptions.Item>
            <Descriptions.Item label='有效期'>
              {this.state.examData.validityBeginDate
                ? `${this.state.examData.validityBeginDate} - ${this.state.examData.validityEndDate}`
                : this.state.examData.validity === '1'
                  ? '永久有效'
                  : '一次性'}
            </Descriptions.Item>
            <Descriptions.Item label='考试开始时间'>
              {this.state.examData.startTime}
            </Descriptions.Item>
            <Descriptions.Item label='总分'>
              {this.state.examData.totalScore}
            </Descriptions.Item>
            <Descriptions.Item label='及格分'>
              {this.state.examData.passScore}
            </Descriptions.Item>
            <Descriptions.Item label='评测类型'>
              {getDictionaryLabel('testExamType', this.state.examData.type)}
            </Descriptions.Item>
            <Descriptions.Item label='考试时长'>
              {this.state.examData.duration}min
            </Descriptions.Item>
            <Descriptions.Item label='题目数'>
              {this.state.examData.questionList.length}
            </Descriptions.Item>
            <Descriptions.Item label='创建人'>
              {this.state.examData.createEmpName}
            </Descriptions.Item>
            <Descriptions.Item label='创建时间'>
              {this.state.examData.createTime}
            </Descriptions.Item>
            <Descriptions.Item label='更新时间'>
              {this.state.examData.updateTime}
            </Descriptions.Item>
          </Descriptions>
        </div>
        <div>
          <Tabs
            defaultActiveKey={this.state.selectModel}
            onChange={this.changeTabs}
          >
            <Tabs.TabPane tab='考试进度' key='1'>
              <div className='examProgress'>
                <div className='blue'>
                  <span className='num'>
                    {this.state.examStatistical.applicantNum}
                  </span>
                  <span className='type'>报名人数</span>
                </div>
                <div className='cyan'>
                  <span className='num'>
                    {this.state.examStatistical.examinationNum}
                  </span>
                  <span className='type'>已考人数</span>
                </div>
                <div className='red'>
                  <span className='num'>
                    {this.state.examStatistical.notExamNum}
                  </span>
                  <span className='type'>未考人数</span>
                </div>
              </div>
              <div>
                <div className='examTitle'>考试人员总览</div>
                <div>
                  <AdvancedSearchForm
                    execSearch={this.execSearch}
                    formData={this.state.searchForm}
                  />
                </div>
              </div>
              <div>
                <Table
                  rowKey='id'
                  loading={this.state.lastLoading}
                  style={{ marginTop: 10 }}
                  scroll={{ x: '100' }}
                  // rowSelection={{ type: 'checkbox', ...rowSelection }}
                  columns={this.state.tableColumns}
                  dataSource={this.state.tableData}
                  pagination={{
                    total: this.state.total1,
                    pageSize: this.state.pageSize1,
                    current: this.state.page1,
                    showSizeChanger: true,
                    onChange: this.changePage1,
                    showTotal: (total) => '共 ' + total + ' 条',
                  }}
                  size='small'
                // bordered
                />
              </div>
            </Tabs.TabPane>
            <Tabs.TabPane tab='阅卷进度' key='2'>
              <div>
                <Table
                  rowKey='markingEmpNo'
                  loading={this.state.lastLoading}
                  style={{ marginTop: 10 }}
                  scroll={{ x: '100' }}
                  columns={this.state.table2Columns}
                  dataSource={this.state.table2Data}
                  pagination={{
                    total: this.state.total2,
                    pageSize: this.state.pageSize2,
                    current: this.state.page2,
                    showSizeChanger: true,
                    onChange: this.changePage2,
                    showTotal: (total) => '共 ' + total + ' 条',
                  }}
                  size='small'
                // bordered
                />
              </div>
            </Tabs.TabPane>
          </Tabs>
        </div>
        <Modal
          title={this.state.modelTitle}
          type='primary'
          width='80%'
          destroyOnClose
          visible={this.state.isEditVisible}
          onCancel={() =>
            this.setState({
              isEditVisible: false,
              selectedMarkRowKeys: [],
              selectedMarkRows: [],
              pageSize: 10,
              page: 1,
            })
          }
          footer={null}
          closable
        >
          {this.state.currType === 'marking' ? (
            <Space>
              {this.state.bottonListLeft.map((item) => (
                <HasPermi key={item.interceptor} bottonData={item} />
              ))}
            </Space>
          ) : (
            <Row wrap={false} gutter={[20]}>
              <Col>
                <Form ref={this.readerForm}>
                  <Form.Item label='阅卷人' name='reader'>
                    <Radio.Group
                      onChange={this.checkReader}
                      buttonStyle='solid'
                    // style={{ marginRight: '20px' }}
                    >
                      {this.state.examinerOptions.map((item) => {
                        return (
                          <Radio.Button
                            key={item.empNo}
                            value={item.empNo}
                            style={{ marginBottom: '10px' }}
                          >
                            {item.empName + '（' + item.empNo + '）'}
                          </Radio.Button>
                        );
                      })}
                    </Radio.Group>
                  </Form.Item>
                </Form>
              </Col>
              <Col>
                <Space>
                  <Button onClick={this.showSearchModal}>添加阅卷人</Button>
                  <HasPermi
                    bottonData={{
                      interceptor: 'tmfsExamPlatform:publishScore:publish',
                      disabled: !this.state.selectedMarkRows.length,
                      clickFn: () =>
                        this.showUpdateExaminer(this.state.selectedMarkRows),
                      text: '修改阅卷人',
                    }}
                  />
                </Space>
              </Col>
            </Row>
          )}
          <NewModal
            modalOptions={{
              width: '1000px',
              visible: this.state.searchEmpModalVisible,
              onCancel: this.hiddenModal,
              destroyOnClose: true,
            }}
            buttonOptions={{
              position: 'center',
              btnList: [
                {
                  key: 0,
                  onClick: this.checkEmpToReader,
                  text: '确认',
                  type: 'primary',
                },
                {
                  key: 1,
                  onClick: this.hiddenModal,
                  text: '取消',
                },
              ],
            }}
          >
            <Form style={{ marginTop: 30 }} ref={this.searchForm}>
              <Form.Item
                label='请输入工号/姓名'
                name='searchData'
                rules={[{ required: true, message: '请输入工号/姓名' }]}
              >
                <Input.Search
                  maxLength={10}
                  loading={this.state.searchLoading}
                  placeholder='请输入工号/姓名'
                  onSearch={(value) => {
                    this.setState({ searchCurrentPage: 1 }, () => {
                      this.searchEmpInfo(value);
                    });
                  }}
                />
              </Form.Item>
            </Form>
            <Table
              bordered
              size='small'
              rowKey='empNo'
              rowSelection={{ type: 'radio', ...searchRowSelection }}
              dataSource={this.state.empInfoList}
              columns={this.state.searchEmpColumns}
              pagination={{
                current: this.state.searchCurrentPage,
                showSizeChanger: false,
                size: 'small',
                total: this.state.searchTotal,
                onChange: this.searchTableChange,
              }}
            />
          </NewModal>
          <Modal
            title='发布考试成绩'
            visible={this.state.isPublishVisible}
            onOk={this.publishScores}
            onCancel={this.handleCancel}
          >
            <InfoCircleOutlined
              style={{
                fontSize: '28px',
                color: '#1890FF',
                float: 'left',
                backgroundColor: '#29F2',
                padding: 8,
                borderRadius: '50%',
              }}
            />
            <div
              style={{
                fontSize: 14,
                marginLeft: 60,
                fontWeight: 700,
                height: 44,
                lineHeight: '44px',
              }}
            >
              发布选中的考试成绩？
            </div>
          </Modal>
          <Modal
            title='修改阅卷人'
            visible={this.state.isUpdataExaminer}
            destroyOnClose
            onOk={this.updateExaminer}
            onCancel={this.handleCancel}
          >
            <Select style={{ width: 240 }} onChange={this.handleChange}>
              {this.state.examinerOptions.map((item) => (
                <Option
                  key={item.empNo}
                  value={item.empNo}
                  disabled={this.state.currentExaminer.examiner === item.empNo}
                >
                  {item.empName}
                </Option>
              ))}
            </Select>
          </Modal>
          {this.state.currType === 'marking' ? (
            <Table
              rowKey='id'
              loading={this.state.lastLoading}
              style={{ marginTop: 10 }}
              scroll={{ x: '100' }}
              rowSelection={{ type: 'checkbox', ...rowSelection1 }}
              columns={this.state.markingColumns}
              dataSource={this.state.markingData}
              pagination={{
                total: this.state.total,
                pageSize: this.state.pageSize,
                current: this.state.page,
                showSizeChanger: true,
                onChange: this.changePage,
                showTotal: (total) => '共 ' + total + ' 条',
              }}
              size='small'
            />
          ) : (
            <Table
              rowKey='id'
              loading={this.state.lastLoading}
              style={{ marginTop: 10 }}
              scroll={{ x: '100' }}
              columns={this.state.noMarkingColumns}
              dataSource={this.state.markingData}
              pagination={{
                total: this.state.total,
                pageSize: this.state.pageSize,
                current: this.state.page,
                showSizeChanger: true,
                onChange: this.changePage,
                showTotal: (total) => '共 ' + total + ' 条',
              }}
              rowSelection={{ type: 'checkbox', ...rowSelection1 }}
              size='small'
            />
          )}
        </Modal>
        <div>
          <Space>
            <Button
              onClick={() => {
                getUrl('/TmfsExam/ExamManagement');
              }}
            >
              返回
            </Button>
          </Space>
        </div>
      </div>
    );
  }
}
